<template>
  <div>
    1213
  </div>
</template>
<script setup lang="ts">
//ts 断言和类型守卫

// 类型断言、非空断言、确定赋值断言


// 类型断言
//尖括号
// let num: any = '小杜杜'
// let res1: number = (<string>num).length; // React中会 error

// // as 语法
// let str: any = 'Domesy';
// let res: number = (str as string).length;



// 非空断言
// const Info = (name: string | null| undefined)=>{
//    let str:string = name;
//    let str2:string = name!;
//    console.log(str,str2);

// }
// Info('Domesy');
// Info(null);
// Info(undefined);


// 确定赋值断言
// let num: number;
// let num1!: number;

// const setNumber = () => num = 7
// const setNumber1 = () => num1 = 7

// setNumber()
// setNumber1()

// console.log(num) // error 
// console.log(num1) // ok


//双重断言   很少用
// interface Info {
//   name: string;
//   age: number;
// }

// const name = '小杜杜' as as Info; // error, 原因是不能把 string 类型断言为 一个接口
// const name1 = '小杜杜' as any as Info; //ok
// console.log(name,name1);


//类型守卫
//in 参考 App09.vue中的in


// typeof关键字
// 用于判断基本类型，如string ｜ number等

// const setInfo = (data: number | string | undefined) => {
//   if (typeof data === "string") {
//     console.log(`我的名字是：${data}`)
//   }

//   if (typeof data === "number") {
//     console.log(`我的年龄是：${data}`)
//   }

//   if (typeof data === "undefined") {
//     console.log(data)
//   }
// }

// setInfo('小杜杜') // "我的名字是：小杜杜"  
// setInfo(7) // "我的年龄是：7" 
// setInfo(undefined) // undefined"


// interfaceof关键字
// 用于判断一个实例是不是构造函数，或使用类的时候

// class Name{
//   name: string
//   constructor(name: string) {
//     this.name = name
//   }
 
// }
// class Age{
//   age: number
//   constructor(age: number) {
//     this.age = age
//   }
  
// }
// const setInfo = (info: Name | Age) => {
//   console.log(info instanceof Name);
//   if (info instanceof Name) {
//     console.log(`我的名字是：${info.name}`)
//   } else if (info instanceof Age) {
//     console.log(`我的年龄是：${info.age}`)
//   }
// }
// setInfo(new Name('zhangsan'))
// setInfo(new Age(18))


//类型谓词（is)  用的很少
function isNumber(x: any): x is number { //默认传入的是number类型
  return typeof x === "number"; 
}
 
console.log(isNumber(7)) // true
console.log(isNumber('7')) //false
console.log(isNumber(true)) //false

</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
